<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time"></year-month-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading"
        :data="lists" height="100%"
        :header-cell-style="{
              backgroundColor: themeColor,
              color: 'white',
              textAlign: 'center'
            }"
        :cell-style="{
              textAlign: 'center'
            }"
      >
        <el-table-column label="区域" prop="districtBelongName" width="140">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row)">{{row.districtBelongName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
          <template v-if="column.children && column.children.length > 0">
            <el-table-column v-for="child in column.children" :key="child.prop" v-bind="child"></el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TimePicker from '@/mixins/time-picker'
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'
import {
  loadMonthKeyIndicators,
  loadYearKeyIndicators,
} from '@/api/government'
import { defaultNumber } from '@/utils'

export default {
  name: 'energy-efficiency-analysis-indicator',
  mixins: [TimePicker, Navigate2enterpriseAnalysis],
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        {
          label: '综合能源消费量',
          children: [
            {
              label: '吨标准煤',
              prop: 'comprehensiveEnergyConsumption'
            },
            {
              label: '同比（%）',
              prop: 'comprehensiveEnergyConsumptionYearOnYear'
            },
            {
              label: '环比（%）',
              prop: 'comprehensiveEnergyConsumptionMonthOnMonth'
            },
          ]
        },
        {
          label: '工业总产值',
          children: [
            {
              label: '万元',
              prop: 'industrialOutput'
            },
            {
              label: '同比（%）',
              prop: 'industrialOutputYearOnYear'
            },
            {
              label: '环比（%）',
              prop: 'industrialOutputMonthOnMonth'
            },
          ]
        },
        {
          label: '用电量',
          children: [
            {
              label: '吨标准煤',
              prop: 'energyUsed'
            },
            {
              label: '同比（%）',
              prop: 'energyUsedYearOnYear'
            },
            {
              label: '环比（%）',
              prop: 'energyUsedMonthOnMonth'
            },
          ]
        },
        {
          label: '用气量',
          children: [
            {
              label: '吨标准煤',
              prop: 'gasConsumption'
            },
            {
              label: '同比（%）',
              prop: 'gasConsumptionYearOnYear'
            },
            {
              label: '环比（%）',
              prop: 'gasConsumptionMonthOnMonth'
            },
          ]
        },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
    isYear () {
      return this.time.length === 4
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    onSearch () {
      this.$nextTick(() => {
        this.getLists()
      })
    },
    getLists () {
      this.loading = true
      let rq
      if (this.isYear) {
        rq = loadYearKeyIndicators({ year: +this.time })
      } else {
        const times = this.time.split('-')
        const year = +times[0]
        const month = +times[1]
        rq = loadMonthKeyIndicators({ year, month })
      }
      rq.then(({ data }) => {
        if (data) {
          this.lists = data.map(v => {
            const keys = Object.keys(v)
            const obj = keys.reduce((acc, key) => {
              if (key !== 'districtBelongName') {
                acc[key] = defaultNumber(v[key])
              } else {
                acc[key] = v[key]
              }
              return acc
            }, {})
            return obj
          })
        } else {
          this.lists = []
        }
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .content-block {
    background: white;
    border-radius: 4px;
  }
  .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
  }
</style>
